<template>
	<view class="content page-bg">
		<!--  #ifdef  MP-WEIXIN -->
		<div class="title" :style="{'paddingTop': statusBarHeight + 'px','height':menuBarHeight + 'px'}">
			<image src="../../static/back.svg" class="logo" mode="" @click="back"></image>
			<text class="brand">金币明细</text>
		</div>
		<!-- #endif -->
		<uni-load-more status="more">

			<div class="coins-item" v-for="item in 10" :key="item">
				<div>
					<div class="event">创建房间</div>
					<div class="date">2021-04-04 12:12:12</div>
				</div>
				<div class="add reduce ">+1</div>
			</div>



		</uni-load-more>

	</view>
</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {
				menuBarHeight: app.globalData.menuBarHeight,
				statusBarHeight: app.globalData.statusBarHeight,
			}
		},
		methods: {
			back() {
				uni.navigateBack()
			},
		}
	}
</script>

<style scoped lang="scss">
	.content::before {
		content: "";
		clear: both;
		display: table;
	}

	.content {
		position: relative;
		height: 100vh;
		width: 100vw;


		.title {
			width: 100%;
			display: flex;
			align-items: center;

			.logo {
				width: 40upx;
				margin-left: 40upx;
			}

			.brand {
				font-size: 40upx;
				color: black;
				margin-left: 20upx;
				font-weight: bolder;
			}


		}

		.coins-item {
			align-items: center;
			border-radius: 16upx;
			box-shadow: 0 4upx 16upx 0 rgba(0, 0, 0, .1);
			display: flex;
			justify-content: space-between;
			margin-bottom: 16upx;
			padding: 16upx 32upx;

			.event {
				font-size: 28upx;
				font-weight: 600
			}

			.date {
				color: #848484;
				font-size: 24upx
			}

			.add {
				color: $uni-color-primary;
				font-size: 42upx;
				font-weight: 600
			}

			.reduce {

				color: #e50808;
				font-size: 42upx;
				font-weight: 600
			}



		}
	}
</style>